<template>
  <div class="edit-form"  >
    <el-dialog title="添加/修改课程" :visible.sync="dialogFormVisible">
      <el-form v-model="editform" style="text-align: left" ref="dataForm">
        <el-form-item label="课程名" :label-width="formLabelWidth" prop="title">
          <el-input v-model="editform.className" autocomplete="off" placeholder="不加《》"></el-input>
        </el-form-item>
        <el-form-item label="任课老师" :label-width="formLabelWidth" prop=”author“>
          <el-input v-model="editform.classTeacher" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面" :label-width="formLabelWidth" prop="abs">
          <div class="avatar" :key="keyNum">
          <el-image v-if="editform.classImg"  v-bind:src="editform.classImg" ></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </div>
          <el-upload class="upload-demo"
                     :limit="1"
                     :file-list="formFileList"
                     :http-request="handleUploadForm"
                     :on-exceed="formHandleExceed"
                     :on-remove="formHandleRemove"
                     :before-upload="beforeUploadForm"
                     action=""
                    >
            <el-button type="primary" style="margin-top: 2px">选择文件并上传</el-button>
            <span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上传jpg/png文件，1M</span>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="uploadClass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddClass",
  data() {
    return {
      dialogFormVisible: false,
      editform:{
        classId:'',
        className:'',
        classTeacher:'',
        classImg:'',
      },
      formLabelWidth: '120px',
      formFileList: [],
      uploadFormFileList: [],
      keyNum:0,
    }
  },
  methods:{
    setEdit(item){
      this.editform.classImg=item.classImg;
      this.editform.classTeacher=item.classTeacher;
      this.editform.className=item.className;
      this.editform.classId=item.classId;
    },
    beforeUploadForm (file) {
      // 验证文件大小
      if (file.size / 1024 / 1024 >1 ) {
        this.$message({
          message: `上传文件大小不能超过1M!`,
          type: 'warning'
        })
        return false
      }
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'jpg' || testmsg === 'png'
      if (!extension) {
        this.$message({
          message: '上传文件只能是jpg/png格式!',
          type: 'warning'
        })
      }
      return extension
    },
    // 移除上传列表中文件
    formHandleRemove (file) {
      let thiz = this
      for (let i = 0; i < thiz.uploadFormFileList.length; i++) {
        if (thiz.uploadFormFileList[i].pname === file.name) {
          thiz.uploadFormFileList.splice(i, 1)
          break
        }
      }
    },
    // 允许上传文件个数验证
    formHandleExceed (files, formFileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + formFileList.length} 个文件`)
    },
    // 上传文件
    handleUploadForm (param) {
      let form = new FormData();
      form.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$axios.post('/uploadClassImg',form).then(resp => {
          this.editform.classImg=resp.data
          this.$message('上传文件成功，')
          this.formFileList = []
          this.uploadFormFileList = []
          this.reload();
          loading.close()
      })
    },
    //局部刷新
    reload(){
      console.log(this.keyNum)
      this.keyNum++;
    },
    //
    uploadClass(){
      this.$axios.post('/uploadClass',{
        classId:this.editform.classId,
        className:this.editform.className,
        classTeacher:this.editform.classTeacher,
        classImg:this.editform.classImg,
      }).then((resp)=>{
        if(resp.data.code===200){
          this.$message({
            type: 'success',
            message:'修改成功',
          });
          this.$emit('updateTable');
        }
        else {
          this.$message({
            type: 'error',
            message:'修改失败',
          });
        }
      })
      this.dialogFormVisible=false
    }

  }
}
</script>

<style scoped>
.avatar {
  border: 1px dashed #0369ad;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  width: 260px;
  height: 130px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #0068fc;
  width: 260px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
</style>
